<template>
  <div py-20rpx flex flex-a-c flex-j-sb v-if="props.res">
    <div flex flex-a-c mr-20rpx>
      <div mr-20rpx>
        <image mode="aspectFill" w-150rpx h-150rpx rounded-100 :src="props.res.storeLogo || configs.logo" />
      </div>
      <div>
        <div @click="$navigateTo('/pages/goods/store/license-photo?id=' + props.res.storeId)" font-bold flex flex-a-c
          text-28rpx>
          {{ props.res.storeName || '' }}
          <nut-icon name="rect-right"></nut-icon>
        </div>
        <div>{{ props.res.collectionNum || 0 }}关注</div>
      </div>
    </div>
    <div>
      <div w-150rpx>
        <nut-button @click="whetherCollection()" size="mini" type="primary">
          <div flex flex-a-c>
            {{ isCollection ? "已关注" : "+ 关注" }}
          </div>

        </nut-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { cancelStoreCollect, collectStore, isStoreCollection } from '@/api/member';
import configs from '@/config/config';
const props = defineProps(['res'])
const isCollection = ref<boolean>(false)
function whetherCollection() {

  if (isCollection.value) {
    cancelStoreCollect("STORE", props.res.storeId).then((res: any) => {
      if (res.data.success) {
        isCollection.value = false;
        uni.showToast({
          icon: "none",
          duration: 3000,
          title: "取消关注成功！",
        });
      }
    });
  } else {
    collectStore("STORE", props.res.storeId).then((res: any) => {
      if (res.data.success) {
        isCollection.value = true;
        uni.showToast({
          icon: "none",
          duration: 3000,
          title: "关注成功！",
        });
      }
    });
  }
}

async function isCollectionStore() {
  let res = await isStoreCollection("STORE", props.res.storeId);
  if (res.data.success) {
    isCollection.value = res.data.result;
  }
}



onMounted(() => {
  isCollectionStore()
})
</script>

<style scoped></style>
